<template lang="">
  <div class="_flex-y _flex-a-stretch _wrapper">
    <div class="_m-b-20">
      <el-radio-group v-model="params.modelType">
        <el-radio
          v-for="item in $comStore.ai.videoTypeList"
          :key="item.val"
          :label="item.val"
          border
          >{{ item.name }}</el-radio
        >
      </el-radio-group>
    </div>
    <el-upload
      class="upload-demo"
      drag
      :action="$comStore.app.baseApi + '/public/ai-file-analysis/single-file'"
      :data="params"
      :on-success="handleSuccess"
      multiple
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">点击或者拖入文件进行分析</div>
      <template #tip>
        <div class="el-upload__tip">请传入需要分析的文件</div>
      </template>
    </el-upload>
    <div>
      <div class="_font-title">
        分析记录<span
          class="_font-mini _m-l-20"
          style="color: #2a5fba"
          @click="initHistory()"
          >刷新</span
        >
      </div>
      <div
        class="_flex _border _p5 _font _m-t-5 _flex-dis-5"
        v-for="(item, _index) in history"
      >
        <div>{{ item.create_time }}</div>
        <div>{{ item.model_type }}</div>
        <div v-if="item.status">已完成</div>
        <div v-else class="_font-hint">分析中</div>
        <div>{{ item.is_alert ? "是" : "否" }}</div>
        <div>
          <template v-if="item.result_url">
            <el-image
              v-if="$reg.isImg(item.result_url)"
              style="width: 50px; height: 50px"
              :src="item.result_url"
              :preview-src-list="history.map((his) => his.result_url)"
              :initial-index="_index"
            >
            </el-image>
            <div v-else>
              <el-button type="danger" @click="play(item.result_url)"
                >播放</el-button
              >
            </div>
          </template>
          <span v-else>分析中</span>
        </div>
      </div>
    </div>
    <el-drawer v-model="isDrawer" direction="rtl">
      <video controls class="_wrapper-x" :src="videoUrl"></video>
    </el-drawer>
  </div>
</template>
<script>
import toolAction from "@/tool/http/tool-action.js";

let apiAnalysisHistory = toolAction.init(
  "ai_file_analysis",
  "272ab1b9c5cc4ea2b76302238247284c"
);

export default {
  data() {
    return {
      params: {
        modelType: "Person",
        fileType: 1,
      },
      history: [],
      isDrawer: false,
      videoUrl: undefined,
    };
  },
  mounted() {
    this.initHistory();
  },
  methods: {
    play(url) {
      this.videoUrl = url;
      this.isDrawer = true;
    },
    initHistory() {
      apiAnalysisHistory
        .list({ sorts: [{ field: "create_time", direction: "DESC" }] })
        .then((res) => {
          this.history = res;
        });
    },
    handleSuccess() {
      this.initHistory();
    },
  },
};
</script>
<style lang=""></style>
